<script setup lang="ts">

import RightHeader from "@/views/right/rightHeader.vue";
import RightContent from "@/views/right/rightContent.vue";
import SceneComponent from "@/components/RightSplit/SceneComponent.vue";
import AnimationComponent from "@/components/RightSplit/AnimationComponent.vue";
import DataComponent from "@/components/RightSplit/DataComponent.vue";
import StateComponent from "@/components/RightSplit/StateComponent.vue";
import {ref} from "vue";
// 定义一个响应式状态来存储当前应该渲染的组件名
const currentComponent = ref<string | null>(null);
const componentMap = {
  // 场景组件
  0: 'SceneComponent',
  // 动画组件
  1: 'AnimationComponent',
  // 数据组件
  2: 'DataComponent',
  // 状态组件
  3: 'StateComponent',
};

// 一个函数，用于根据点击的 label 更新 currentComponent 的值
const selectComponent = (index) => {
  console.log("receive: index: ");
  currentComponent.value = componentMap[index] as string;
  console.log(currentComponent.value);
};
const showChildMessage = (message) => {
  console.log("receive: index: ");
  alert(message);
};
</script>

<template>
  <RightHeader @childMessage="showChildMessage" ></RightHeader>
  <!--  <right-content v-if=""></right-content>-->
<!--  <component :is="currentComponent" v-if="currentComponent"></component>-->
<!--  <right-content v-else></right-content>-->
</template>

<style scoped>

</style>